<!DOCTYPE html>

<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
		<title>剩余寿命预测1</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/app.css" />
		<link rel="stylesheet" href="../css/font.css">
		<link rel="stylesheet" href="../css/formSelects-v4.css" />
		<!-- <link rel="stylesheet" href="../css/tablestyle.css"> -->

		<script src="../js/echarts.min.js"></script>
		<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
		<script>
		MathJax = {
			tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
		};
		</script>
		<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
	</head>
	
	<body class="bg01">
		<header class="header">
			<h3>设备剩余寿命预测</h3>
		</header>
		
		<div class="wrapper">
			<div class="container-fluid">
				<div class="row fill-h">
					<div class="col-lg-3 fill-h">
						<div class="xpanel-wrapper xpanel-wrapper-2">
							<div class="xpanel">
								<!-- 地图飞线 -->
								<div class="title-h" style="background:linear-gradient(to right,rgb(12, 36, 68),rgba(99, 89, 190, 0.719));">
									<p style="padding-top:6px; color:#fcfcfcc4; font-size: 20px;font-weight:bold">设备选择</span></p>
								</div>     
								<!-- <div style=" display: inline-block; padding-top:6px; width: 75%; vertical-align: top;">
									<div class="layui-form">
										<select name="city" xm-select="select1" xm-select-max="1" xm-select-direction="auto">
											<option value="">请选择需要预测的设备</option>
										</select>
									</div> 
								</div> -->
								<div class="card1" style="width: 95%; margin-top: 10px; margin-left: 10px;background-color: #040d619f;"> 
									<div class="card-body">										
										<!-- <h5 class="card-title"> <span class="name">评估指标</span></h5> -->
										<span style="float: left; height: 50%; width: 30%; font-size: 15px;font-weight:bold; line-height: 34px; color: #fcfcfcc4;">设备地点：</span>
										<input id="tag4" style="width:calc(90% - 25%);resize:none; height: 34px;font-weight:bold; color:#e07510c4;float: right;background-color: transparent;" maxlength="10" value = "液化">
										<span style="float: left; height: 50%; width: 30%;font-size: 15px;font-weight:bold; line-height: 34px;color: #fcfcfcc4;">当前设备为：</span>
										<input id="tag5" style="width:calc(90% - 25%);resize:none; height: 34px;font-weight:bold;color:#e01010c4; float: right;background-color: transparent;" maxlength="10" value = "P2306D液化泵">
									</div>     
								</div>	
								<div class="card" style="width: 95%; margin-top: 10px; margin-left: 10px;background-color: #040d619f;"> 
									<div class="card-body">
										<h5 class="card-title"> <span class="name">评估指标</span></h5>
										<span style="float: left; height: 34px; width: 25%; line-height: 34px; color: #fcfcfcc4;">$Score：$</span>
										<input id="tag1" style="width:calc(90% - 20%);resize:none; height: 34px; float: right" maxlength="10" value = 0>
										<span style="float: left; height: 34px; width: 25%; line-height: 34px;color: #fcfcfcc4;">$RMSE：$</span>
										<input id="tag2" style="width:calc(90% - 20%);resize:none; height: 34px; float: right" maxlength="10" value = 0>
										<span style="float: left; height: 34px; width: 25%; line-height: 34px;color: #fcfcfcc4;">$R^2：$</span>
										<input id="tag3" style="width:calc(90% - 20%);resize:none; height: 34px; float: right" maxlength="10" value = 0>
									</div>     
								</div>                   
							</div>
						</div>
						<div class="xpanel-wrapper xpanel-wrapper-2">
							<div id="app" class="xpanel">
								<!-- 世界地图 左下和右侧 -->
								<!-- <div class="fill-h" id="worldMap"></div> -->
								<div class="title-h" style="background:linear-gradient(to right,rgb(12, 36, 68),rgba(99, 89, 190, 0.719));">
									<p style="padding-top:6px; color:#fcfcfcc4; font-size: 20px;font-weight:bold">操作日志</span></p>
								</div> 
								<div class="table_position">
									<table class="table table-hover table-striped" style="color:#fcfcfcc4; font-size: 5px;">
										<thead>
											<tr>
												<th scope="col">序号</th>
												<th scope="col">设备地点</th>
												<th scope="col">监测设备</th>
												<th scope="col">剩余寿命/h</th>
												<th scope="col">操作人员</th>
												<th scope="col">操作日期</th>
											</tr>
										</thead>
										<tbody>
											<tr v-for="l in dinary">
												<th scope="row">{{l.idx}} </th>
												<td>{{l.pst}} </td>
												<td>{{l.eqt}}</td>
												<td>{{l.R}}</td>
												<td>{{l.peo}}</td>
												<td>{{l.dat}}</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div>
									<button type="button" class="btn btn-primary" @click="checking">更新日志</button>
									<button type="button" class="btn btn-danger" @click="clear" style="background-color: rgb(102, 156, 156); border: 1px solid rgb(101, 150, 150);">清除日志</button>
									<button  type="button" class="btn btn-primary" id ="yuce" style="margin-left:80px; width: 23%;background-color: rgb(109, 108, 29);">开始预测</button>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6 fill-h">
						<div class="xpanel-wrapper xpanel-wrapper-1">
							<div class="xpanel">
								<!-- 地图散点 中间-->
								<!-- <div  class="fill-h" id="lishi"></div> -->
								<div  class="fill-h" id="qushixian"></div>

							</div>
						</div>
						<div class="xpanel-wrapper xpanel-wrapper-1">
							<div  class="xpanel">
								<!-- 地图散点 中间-->
								<div  class="fill-h" id="net"></div>
							</div>
						</div>
					</div>
					<div class="col-lg-3 fill-h">
						<div class="xpanel-wrapper xpanel-wrapper-2">
							<div class="xpanel">
								<div class="fill-h">
									<div class="title-h" style="background:linear-gradient(to right,rgb(12, 36, 68),rgba(99, 89, 190, 0.719));">
										<p style="padding-top:6px; color:#fcfcfcc4; font-size: 20px;font-weight:bold">设备温度预警</span></p>
									</div>
									<div id="wendu" style="height:75%; background-color:transparent;"></div>
									<i class="iconfont" style="padding-left: 65px;color:#fcfcfcc4;font-size: 20px;">&#xe756;</i>
									<label style="color:#fcfcfcc4; font-size: 18px; font-weight:normal" for="temp1">设备当前温度：</label>
									<input style="color:#fcfcfcc4; font-size: 18px; width: 60px; background-color: transparent; border: 0; outline: none;" type="text" value="正常" id = "temp1">
								</div>								
							</div>
						</div>
						<div class="xpanel-wrapper xpanel-wrapper-2">
							<div class="xpanel">
								<!-- 城市地图 -->
								<div class="fill-h">
									<div class="title-h" style="background:linear-gradient(to right,rgb(12, 36, 68),rgba(99, 89, 190, 0.719));">
										<p style="padding-top:6px; color:#fcfcfcc4; font-size: 20px;font-weight:bold">设备剩余服役寿命</span></p>
									</div>
									<div id="fuyi" style="height:75%; background-color:transparent;"></div>
									<i class="iconfont" style="color:#fcfcfcc4;font-size: 20px;">&#xe6bb;</i>
									<label style="color:#fcfcfcc4; font-size: 18px; font-weight:normal" for="shichang">预计剩余服役时长为（小时）：</label>
									<input style="color:#fcfcfcc4; font-size: 18px; width: 70px; background-color: transparent; border: 0; outline: none;" type="text" value="3000" id = "shichang">
								</div>
							</div>
						</div>
						<!-- <div class="xpanel-wrapper xpanel-wrapper-3">
							<div class="xpanel">
								<!-- 区县地图 -->
								<!-- <div class="fill-h" id="countyMap"></div> -->
							</div>
						</div> -->
					</div>
				</div>
			</div>
		</div>
		
		<!-- <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> -->
		<!-- <script type="text/javascript" src="js/echarts-3.8.5.min.js"></script> -->		
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
		
		<script src="../js/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript" src="../js/myjs.js"></script>
		<!-- <script type="text/javascript" src="js/echarts-map-world.js"></script>
		<script type="text/javascript" src="js/echarts-map-china.js"></script> -->
		<!-- <script type="text/javascript" src="js/echarts-china-provinces/jiangsu.js"></script>
		<script type="text/javascript" src="js/echarts-china-cities/jiang1_su1_su1_zhou1.js"></script>
		<script type="text/javascript" src="js/echarts-china-counties/jiang1su1_su1zhou1_kun1shan1shi4.js"></script> -->
		
		<script type="text/javascript">
			$(function(){
				var app = new Vue({
					el:"#app",
					data:{
						machine:[{position:"防爆（蒸馏）",equi:"机封水泵",RUL:3.14,people:"张三",date:"2020-10-10"},
							{position:"防爆（蒸馏）",equi:"机封水泵",RUL:1.48,people:"张三",date:"2020-10-11"},
							{position:"防爆（蒸馏）",equi:"机封水泵",RUL:7.48,people:"李四",date:"2020-10-12"},
							{position:"防爆（蒸馏）",equi:"机封水泵",RUL:3.48,people:"张三",date:"2020-10-13"},
							{position:"防爆（蒸馏）",equi:"二精塔循环泵",RUL:3.48,people:"王五",date:"2020-12-14"},
							{position:"防爆（蒸馏）",equi:"二精塔循环泵",RUL:3.48,people:"张三",date:"2021-02-15"},
							{position:"防爆（蒸馏）",equi:"二精塔循环泵",RUL:3.48,people:"狗蛋",date:"2021-03-10"},
							{position:"防爆（蒸馏）",equi:"二精塔循环泵",RUL:3.48,people:"七七",date:"2021-04-10"},],
						dinary:[{idx:1,pst:"防爆（蒸馏）",eqt:"机封水泵",R:3.14,peo:"八八",dat:"2020-10-10"}]
					},
					methods:{
						update_dinary:function(item){
							// item,err,val
							var L = this.dinary.length+1;
							// console.log(L);
							this.dinary.push({idx:L,pst:item.position,eqt:item.equi,R:item.RUL,peo:item.people,dat:item.date});
							// this.dinary.push({idx:5,pst:"防爆（蒸馏）",eqt:"机封水泵",pot:"驱动端",err:"均方根值", val:5.27});
						},
						checking:function(){
							this.machine.forEach(element => {
								// console.log(element);
								this.update_dinary(element);
							});
						},
						clear:function(){
							this.dinary.splice(0,this.dinary.length);
						}
					}
				})

				/******************* 地图飞线 ******************/
				var wendu = echarts.init(document.getElementById('wendu'));
				var wendu_option;

				wendu_option = {
					series: [{
							type: 'gauge',
							center: ["50%", "65%"],
							startAngle: 200,
							endAngle: -20,
							min: 20,
							max: 100,
							splitNumber: 16,
							itemStyle: {
								color: 'DodgerBlue'
							},
							progress: {
								show: true,
								width: 20
							},

							pointer: {
								show: true,
								length: '85%',
							},
							axisLine: {
								show: true,
								lineStyle: {
									width: 20,
									color:[[1,'#0a3fb37c']]
								}
							},
							axisTick: {
								distance: -27,
								splitNumber: 5,
								lineStyle: {
									width: 2,
									color: '#fcfcfcc4'
								}
							},
							splitLine: {
								distance: -35,
								length: 10,
								lineStyle: {
									width: 3,
									color: '#fcfcfcc4'
								}
							},
							axisLabel: {
								distance: -10,
								color: '#fcfcfcc4',
								fontSize: 14
							},
							anchor: {
								show: false
							},
							title: {
								show: false
							},
							detail: {
								valueAnimation: true,
								width: '60%',
								lineHeight: 40,
								height: '15%',
								borderRadius: 5,
								offsetCenter: [0, '26%'],
								fontSize: 24,
								fontWeight: 'bolder',
								formatter: '{value} °C',
								color: '#fcfcfcc4'
							},
							data: [{
								value: 20
							}]
						},

						{
							type: 'gauge',
							center: ["50%", "65%"],
							startAngle: 200,
							endAngle: -20,
							min: 20,
							max: 100,
							itemStyle: {
								color: 'Cyan',
							},
							progress: {
								show: true,
								width: 10
							},

							pointer: {
								show: false
							},
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							},
							axisLabel: {
								show: false
							},
							detail: {
								show: false
							},
							data: [{
								value: 20,
							}]

						}
					],
				};

				setInterval(function() {
					let random = (Math.random() * 60).toFixed(2) - 0;
					wendu_option.series[0].data[0].value = random;
					wendu_option.series[1].data[0].value = random;
					wendu.setOption(wendu_option, true);
				}, 2000);

				wendu.setOption(wendu_option);



				var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
				var fuyi = echarts.init(document.getElementById('fuyi'));
				var fuyi_option;

				var _panelImageURL = ROOT_PATH + '/data/asset/img/custom-gauge-panel.png';
				var _animationDuration = 1000;//动画持续时间
				var _animationDurationUpdate = 1000;
				var _animationEasingUpdate = 'quarticInOut';
				var _valOnRadianMax = 200;
				var _outerRadius = 100;
				var _innerRadius = 80;
				var _pointerInnerRadius = 40;
				var _insidePanelRadius = 70;
				var _currentDataIndex = 0;
				var rest = 1;

				function renderItem(params, api) {
					var valOnRadian = api.value(1);
					var coords = api.coord([api.value(0), valOnRadian]);
					var polarEndRadian = coords[3];
					var imageStyle = {
						image: _panelImageURL,
						x: params.coordSys.cx - _outerRadius,
						y: params.coordSys.cy - _outerRadius,
						width: _outerRadius * 2,
						height: _outerRadius * 2
					};

					return {
						type: 'group',
						children: [{
							type: 'image',
							style: imageStyle,
							clipPath: {
								type: 'sector',
								shape: {
									cx: params.coordSys.cx,
									cy: params.coordSys.cy,
									r: _outerRadius,
									r0: _innerRadius,
									startAngle: 0,
									endAngle: -polarEndRadian,
									transition: 'endAngle',
									enterFrom: { endAngle: 0 }
								}
							}
						}, {
							type: 'image',
							style: imageStyle,
							clipPath: {
								type: 'polygon',
								shape: {
									points: makePionterPoints(params, polarEndRadian)
								},
								extra: {
									polarEndRadian: polarEndRadian,
									transition: 'polarEndRadian',
									enterFrom: { polarEndRadian: 0 }
								},
								during: function (apiDuring) {
									apiDuring.setShape(
										'points',
										makePionterPoints(params, apiDuring.getExtra('polarEndRadian'))
									);
								}
							}
						}, {
							type: 'circle',
							shape: {
								cx: params.coordSys.cx,
								cy: params.coordSys.cy,
								r: _insidePanelRadius
							},
							style: {
								fill: '#fff',
								shadowBlur: 25,
								shadowOffsetX: 0,
								shadowOffsetY: 0,
								shadowColor: 'rgba(76,107,167,0.4)'
							}
						}, {
							type: 'text',
							extra: {
								valOnRadian: valOnRadian,
								transition: 'valOnRadian',
								enterFrom: { valOnRadian: 0 }
							},
							style: {
								text: makeText(valOnRadian),
								fontSize: 50,
								fontWeight: 700,
								x: params.coordSys.cx,
								y: params.coordSys.cy,
								fill: 'rgb(0,50,190)',
								align: 'center',
								verticalAlign: 'middle',
								enterFrom: { opacity: 0 }
							},
							during: function (apiDuring) {
								apiDuring.setStyle('text', makeText(apiDuring.getExtra('valOnRadian')));
							}
						}]
					};
				}

				function convertToPolarPoint(renderItemParams, radius, radian) {
					return [
						Math.cos(radian) * radius + renderItemParams.coordSys.cx,
						-Math.sin(radian) * radius + renderItemParams.coordSys.cy
					];
				}

				function makePionterPoints(renderItemParams, polarEndRadian) {
					return [
						convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian),
						convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian + Math.PI * 0.03),
						convertToPolarPoint(renderItemParams, _pointerInnerRadius, polarEndRadian)
					];
				}

				function makeText(valOnRadian) {
					// Validate additive animation calc.
					if (valOnRadian < -10) {
						alert('illegal during val: ' + valOnRadian);
					}
					return (valOnRadian / _valOnRadianMax * 100).toFixed(0) + '%';
				}

				fuyi_option = {
					animationEasing: _animationEasingUpdate,
					animationDuration: _animationDuration,
					animationDurationUpdate: _animationDurationUpdate,
					animationEasingUpdate: _animationEasingUpdate,
					// title: {
					// 		text: '设备剩余服役寿命',
					// 		//subtext: 'Example in MetricsGraphics.js',
					// 		left: 'left',
					// 		padding: 15
					// 	},
					dataset: {
						source: [[1, 200]]
					},
					tooltip: {},
					angleAxis: {
						type: 'value',
						startAngle: 0,
						axisLine: { show: false },
						axisTick: { show: false },
						axisLabel: { show: false },
						splitLine: { show: false },
						min: 0,
						max: _valOnRadianMax
					},
					radiusAxis: {
						type: 'value',
						axisLine: { show: false },
						axisTick: { show: false },
						axisLabel: { show: false },
						splitLine: { show: false }
					},
					polar: {},
					series: [{
						type: 'custom',
						coordinateSystem: 'polar',
						renderItem: renderItem
					}]
				};

				setInterval(function () {
				    var nextSource = [[1, Math.round(Math.random() * _valOnRadianMax)]];
				    fuyi.setOption({
				        dataset: {
				            source: nextSource
				        }
				    });
				}, 10000);

				fuyi.setOption(fuyi_option); 

				// var formSelects = layui.formSelects;
				// formSelects.data('select1', 'local', {
				// 	arr: [
				// 		{
				// 			"name": "蒸馏（防爆）", 
				// 			"value": 1, 
				// 			"children": [
				// 				{"name": "机封水泵", "value": 12, "children": []},
				// 				{"name": "二精塔循环泵", "value": 17, "children": []},
				// 				{"name": "粗塔循环泵", "value": 18, "children": []},
				// 			]
				// 		},
				// 		{
				// 			"name": "饲料", 
				// 			"value": 2, 
				// 			"children": [
				// 				{"name": "风送（风机）", "value": 51, "children": []},
				// 			]
				// 		},
				// 		{
				// 			"name": "空压冷冻站", 
				// 			"value": 3, 
				// 			"children": [
				// 				{"name": "工艺空气压缩机", "value": 13, "children": []},
				// 				{"name": "仪表空气压缩机", "value": 14, "children": []},
				// 			]
				// 		},
				// 	],
				// 	linkage: true   //开启联动模式
				// });

				// console.log(document.getElementById('qushixian'))
				var qushixian = echarts.init(document.getElementById('qushixian'));
				var qushixian_option;

				qushixian.showLoading();
				$.get(ROOT_PATH + '/data/asset/data/confidence-band.json', function (data) {
					qushixian.hideLoading();

					var base = -data.reduce(function (min, val) {
						return Math.floor(Math.min(min, val.l));
					}, Infinity);
					qushixian.setOption(qushixian_option = {
						title: {
							text: '剩余寿命趋势预测',
							//subtext: 'Example in MetricsGraphics.js',
							left: 'left',
							padding: 15,
							textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
				//                 fontFamily: 'Arial, Verdana, sans...',
				                fontSize: 22,
				                fontStyle: 'normal',
				//                 fontWeight: 'normal',
								color: '#fcfcfcc4' 
				            },
						},
						// 图例
						legend: {
							orient: 'horizontal',          // 布局方式，默认为水平布局，可选为：
											// 'horizontal' ¦ 'vertical'
							x: 'right',                // 水平安放位置，默认为全图居中，可选为：
													// 'center' ¦ 'left' ¦ 'right'
											// ¦ {number}（x坐标，单位px）
							y: 'top',              // 垂直安放位置，默认为全图顶端，可选为：
											// 'top' ¦ 'bottom' ¦ 'center'
											// ¦ {number}（y坐标，单位px）
							backgroundColor: 'rgba(0,0,0,0)',
							borderColor: '#ccc',            // 图例边框颜色
							borderWidth: 0,                // 图例边框线宽，单位px，默认为0（无边框）
							padding: 25,                  // 图例内边距，单位px，默认各方向内边距为5，
													// 接受数组分别设定上右下左边距，同css
							itemGap: 10,              // 各个item之间的间隔，单位px，默认为10，
												// 横向布局时为水平间隔，纵向布局时为纵向间隔
							itemWidth: 20,             // 图例图形宽度
							itemHeight: 14,            // 图例图形高度
							textStyle: {
								color: '#fcfcfcc4'                              // 图例文字颜色
							}
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								animation: false,
								label: {
									backgroundColor: '#ccc',
									borderColor: '#aaa',
									borderWidth: 1,
									shadowBlur: 0,
									shadowOffsetX: 0,
									shadowOffsetY: 0,

									color: '#222'
								}
							},
							formatter: function (params) {
								return params[2].name + '<br />' + ((params[2].value - base) * 100).toFixed(1) + '%';
							}
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							data: data.map(function (item) {
								return item.date;
							}),
							axisLabel: {
								formatter: function (value, idx) {
									var date = new Date(value);
									return idx === 0 ? value : [date.getMonth() + 1, date.getDate()].join('-');
								},
								color: '#fcfcfcc4'
							},
							boundaryGap: false
						},
						yAxis: {
							axisLabel: {
								formatter: function (val) {
									return (val - base) * 100 + '%';
								},
								color: '#fcfcfcc4'
							},
							axisPointer: {
								label: {
									formatter: function (params) {
										return ((params.value - base) * 100).toFixed(1) + '%';
									}
								}
							},
							splitNumber: 3
						},
						series: [{
							// name: 'L',
							type: 'line',
							data: data.map(function (item) {
								return item.l + base;
							}),
							lineStyle: {
								opacity: 0
							},
							stack: 'confidence-band',
							symbol: 'none'
						}, {
							name: '置信区间',
							type: 'line',
							color: 'DodgerBlue',
							data: data.map(function (item) {
								return item.u - item.l;
							}),
							lineStyle: {
							opacity: 0
							},
							areaStyle: {
								color: 'DodgerBlue'
							},
							stack: 'confidence-band',
							symbol: 'none'
						}, {
							name: '预测值',
							type: 'line',
							data: data.map(function (item) {
								return item.value + base;
							}),
							hoverAnimation: false,
							symbolSize: 6,
							itemStyle: {
								color: 'Cyan'
							},
							showSymbol: false
						}]
					});
				});

				qushixian_option && qushixian.setOption(qushixian_option);

				var net = echarts.init(document.getElementById('net'));
				var net_option;

				net.showLoading();
				$.getJSON('./.vscode/' + 'les-miserables.json', function (graph) {
					net.hideLoading();

					graph.nodes.forEach(function (node) {
						node.label = {
							show: node.symbolSize > 30
						};
					});
					net_option = {
						title: {
							text: '网络结构关系',
							top: 'bottom',
							left: 'left',
							textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
				//                 fontFamily: 'Arial, Verdana, sans...',
				                fontSize: 22,
				                fontStyle: 'normal',
				//                 fontWeight: 'normal',
								color: '#fcfcfcc4' 
				            },
						},
						tooltip: {},
						legend: [{
							// selectedMode: 'single',
							orient: 'vertical',
							x:'right',      //可设定图例在左、右、居中
							y:'center',     //可设定图例在上、下、居中
							padding:[0,50,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
							textStyle: {
								color:'#fcfcfcc4' ,
							},
							data: graph.categories.map(function (a) {
								return a.name;
							})
						}],
						animationDuration: 1500,
						animationEasingUpdate: 'quinticInOut',
						series: [
							{
								name: 'Les Miserables',
								type: 'graph',
								layout: 'none',
								data: graph.nodes,
								links: graph.links,
								categories: graph.categories,
								roam: true,
								label: {
									position: 'right',
									formatter: '{b}'
								},
								lineStyle: {
									color: 'source',
									curveness: 0.3
								},
								emphasis: {
									focus: 'adjacency',
									lineStyle: {
										width: 10
									}
								}
							}
						]
					};

					net.setOption(net_option);
				});

				net_option && net.setOption(net_option);

				/********** 浏览器窗口改变时，重置报表大小 ****************/
				window.onresize = function() {
					console.log("窗口发生改变了哟！");
					wendu.resize();
					fuyi.resize();
					qushixian.resize();
					net.resize();
				}
			});
				
		</script>
		<!-- <script type="module">
			var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
			var qushixian = echarts.init(document.getElementById('qushixian'));
			var qushixian_option;

			qushixian.showLoading();
			$.get(ROOT_PATH + '/data/asset/data/confidence-band.json', function (data) {
				qushixian.hideLoading();

				var base = -data.reduce(function (min, val) {
					return Math.floor(Math.min(min, val.l));
				}, Infinity);
				qushixian.setOption(qushixian_option = {
					title: {
						text: '剩余寿命趋势预测',
						//subtext: 'Example in MetricsGraphics.js',
						left: 'left',
						padding: 15,
						textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
			//                 fontFamily: 'Arial, Verdana, sans...',
			                fontSize: 22,
			                fontStyle: 'normal',
			//                 fontWeight: 'normal',
							color: '#fcfcfcc4' 
			            },
					},
					// 图例
					legend: {
						orient: 'horizontal',          // 布局方式，默认为水平布局，可选为：
										// 'horizontal' ¦ 'vertical'
						x: 'right',                // 水平安放位置，默认为全图居中，可选为：
												// 'center' ¦ 'left' ¦ 'right'
										// ¦ {number}（x坐标，单位px）
						y: 'top',              // 垂直安放位置，默认为全图顶端，可选为：
										// 'top' ¦ 'bottom' ¦ 'center'
										// ¦ {number}（y坐标，单位px）
						backgroundColor: 'rgba(0,0,0,0)',
						borderColor: '#ccc',            // 图例边框颜色
						borderWidth: 0,                // 图例边框线宽，单位px，默认为0（无边框）
						padding: 25,                  // 图例内边距，单位px，默认各方向内边距为5，
												// 接受数组分别设定上右下左边距，同css
						itemGap: 10,              // 各个item之间的间隔，单位px，默认为10，
											// 横向布局时为水平间隔，纵向布局时为纵向间隔
						itemWidth: 20,             // 图例图形宽度
						itemHeight: 14,            // 图例图形高度
						textStyle: {
							color: '#fcfcfcc4'                              // 图例文字颜色
						}
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							animation: false,
							label: {
								backgroundColor: '#ccc',
								borderColor: '#aaa',
								borderWidth: 1,
								shadowBlur: 0,
								shadowOffsetX: 0,
								shadowOffsetY: 0,

								color: '#222'
							}
						},
						formatter: function (params) {
							return params[2].name + '<br />' + ((params[2].value - base) * 100).toFixed(1) + '%';
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: data.map(function (item) {
							return item.date;
						}),
						axisLabel: {
							formatter: function (value, idx) {
								var date = new Date(value);
								return idx === 0 ? value : [date.getMonth() + 1, date.getDate()].join('-');
							},
							color: '#fcfcfcc4'
						},
						boundaryGap: false
					},
					yAxis: {
						axisLabel: {
							formatter: function (val) {
								return (val - base) * 100 + '%';
							},
							color: '#fcfcfcc4'
						},
						axisPointer: {
							label: {
								formatter: function (params) {
									return ((params.value - base) * 100).toFixed(1) + '%';
								}
							}
						},
						splitNumber: 3
					},
					series: [{
						// name: 'L',
						type: 'line',
						data: data.map(function (item) {
							return item.l + base;
						}),
						lineStyle: {
							opacity: 0
						},
						stack: 'confidence-band',
						symbol: 'none'
					}, {
						name: '置信区间',
						type: 'line',
						color: 'DodgerBlue',
						data: data.map(function (item) {
							return item.u - item.l;
						}),
						lineStyle: {
						opacity: 0
						},
						areaStyle: {
							color: 'DodgerBlue'
						},
						stack: 'confidence-band',
						symbol: 'none'
					}, {
						name: '预测值',
						type: 'line',
						data: data.map(function (item) {
							return item.value + base;
						}),
						hoverAnimation: false,
						symbolSize: 6,
						itemStyle: {
							color: 'Cyan'
						},
						showSymbol: false
					}]
				});
			});

			qushixian_option && qushixian.setOption(qushixian_option);
		</script> -->

		
		
	</body>
</html>